<template>
    
    <div class="commodity-wrap">
        <div class="tops-img">
            <van-icon name="arrow-left" @click="$router.go(-1)" />
            <img :src="foodList.imgUrl">
        </div>

        <div class="commodity-datail">
            <h3>{{foodList.name}}</h3>
            <p class="sales-volume"><span class="num">月售{{foodList.sellCount}}份</span><span>好评率100%</span></p>
            <div class="tops-price">
                <p class="prices"><span class="new-price"><span class="new-log">￥</span>{{foodList.price|toFixed2}}</span><span
                        class="old-price">￥99.40</span></p>
                <div class="join-shop">
                    <van-icon name="shopping-cart" />
                    <span Toast>加入购物车</span>
                    
                </div>
            </div>
        </div>
        <!-- 商品介绍 -->
        <div class="introduce">
            <h3>商品介绍</h3>
            <p>{{foodList.goodsDesc}}</p>
        </div>
  <!-- 商品留言 -->
 <div class="commodity-message">

    <van-tabs type="card">
  <van-tab title="全部">
    <div class="messages-card" v-for="(item,index) in foodList.ratings" :key="index">
			<img :src="item.avatar" />
		
		<div class="card-content">
			<div class="first">
				<span>{{item.username}}</span>
				<span>{{item.rateTime|formatYMDhms}}</span>
			</div>
			<!-- <div class="second">
				<van-rate
					v-model="value"
					:size="18"
					color="#ffd21e"
					void-icon="star"
					void-color="#eee"
					allow-half
                    :readonly="true"
				/>
				<span> 25分钟送达 </span>
			</div> -->
			<div class="third">
				<p>{{item.text}}</p>
			</div>
			
		</div>
	</div>
  </van-tab>
  <van-tab title="推荐">内容 2</van-tab>
  <van-tab title="吐槽">内容 3</van-tab>
</van-tabs>
 </div>
    </div>
</template>

<script>
import {Toast} from 'vant';
import { mapMutations } from 'vuex';
import {toFixed2} from '@/filters/getTime'
export default {
    data(){
       return{
        value:5,
        foodList:null
       }
    },
    created(){
        this.foodList=this.$route.params;
        console.log(this.foodList);
      
    },
    methods:{
  
    }
}
</script>

<style lang="scss" scoped>
.commodity-wrap {
    width: 100%;
    height: 100%;
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
    .tops-img {
        width: 100%;
        position: relative;

        img {
            width: 100%;
            height: 250px;
        }

        .van-icon {
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            left: 10px;
            top: 10px;
        }

    }

    // 标题
    .commodity-datail {
        margin-top: 20px;
        padding: 0 15px 20px 15px;
        border-bottom: 20px solid #f4f5f7;

        .sales-volume {
            color: #999;
            margin: 10px 0 10px 0;

            .num {
                margin-right: 20px;
            }
        }

        .tops-price {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .prices {

                .new-price {
                    color: red;
                    font-weight: bold;
                    font-size: 26px;
                    margin-right: 20px;

                    .new-log {
                        font-size: 14px;
                    }
                }

                .old-price {
                    color: #9C9C9B;
                    font-size: 14px;
                    text-decoration: line-through;
                }
            }

            .join-shop {
                width: 140px;
                height: 45px;
                background-color: #ffc300;
                border-radius: 30px;
                text-align: center;
                line-height: 45px;

                .van-icon {
                    font-size: 20px;
                    margin-right: 10px;
                }

                span {
                    font-size: 14px;
                    font-weight: 800;
                }
            }
        }
    }

    .introduce{
    padding: 20px;
    border-bottom: 20px solid #f4f5f7;
   h3{
    color: #353535;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
    font-weight: 400;
   }
   p{
    line-height: 24px;
   }
}

.commodity-message{
   
        // padding-top: 20px;
        .van-tabs{
            margin-top: 20px;
        }
        ::v-deep .van-tabs__nav--card .van-tab.van-tab--active{
            color: #181818;
           font-weight: bold;
    background-color: #F5C444;
        }
        ::v-deep .van-tabs__nav--card .van-tab{
            color: #F5C444;
    border-right: 1px solid #F5C444;
        }
        ::v-deep .van-tabs__nav--card{
            border: 1px solid #F5C444;
        }
        ::v-deep .van-tabs__nav--card .van-tab:last-child{
            border-right: none;
        }
        .messages-card {
		padding: 20px 10px;
		border-bottom: 1px solid rgba(128, 128, 128, 0.2);
		display: flex;
       
		img {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}
		.card-content {
			margin-left: 10px;
			flex: 1;
			.first {
				display: flex;
				justify-content: space-between;

				& span:nth-child(2) {
					color: rgba(128, 128, 128, 0.7);
				}
			}
			// .second {
			//     margin: 8px 0;
			// 	span {
			// 		margin-left: 20px;
			// 		font-size: 14px;
			// 		color: rgba(128, 128, 128, 0.7);
			// 	}
			// }
			.third {
                margin-top: 10px;
				p {
					font-size: 14px;
				}
			}
			
		}
	}


}
}
</style>